
<html>
    <head>
        <title>甜品商城</title>
        <meta charset="UTF-8">
        <style>
            .box{
                float: left;
                position: absolute;
                transform: translate(150%,50%);
                
            }
            .ttl{
                color: deeppink;
                font-size: 30px;
                float: left;
            }
            .dh a{
                list-style: none;
                float: right;
                font-size: 20px;
                margin-left: 12px;               
            }
            .dh span{
                position: absolute;
                transform: translate(20000%,10%);
            }
            .zh{
                    
                width: 1000px;
                height: 667px;
                position: absolute;
                transform: translate(40%,50%);
            }
            .dhl a{
                font-size: 30px;
                position: absolute;
                transform: translate(100%,100%);
                margin-left: -150px;
                
            }
           
            
        </style>
    </head>
    
    

    
    
    <body>
        <div class="zh">
            <div class="ttl">甜甜啦</div>
            
            <div class="box">
                <input type="text" class="input" placeholder="请输入商品">
                <input type="button" value="搜索" class="button">
            </div>
            
            <div class="dh">
                <a href="" >登录</a>
                <span>|</span>
                <a href="" >注册</a>
            </div>
            <div class="dhl">
                
                    <a href="">首页</a>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <a href="">我的订单</a>
            </div>
            
            
        </div>
    </body>
</html>
